<template>
	<view @click="handleClick" class="i-rateLine" :style="{marginBottom: bottom}">
		<view class="title">{{title}}</view>
		<view class="lines">
			<view class="line" :style="{width,height, background: color}"></view>
			<view class="lines_text"><slot></slot></view>
		</view>
		<view class="rig">
			<i-price :size="24">{{price}}</i-price>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	const props = defineProps({
		color: {
			type: String,
			default: '#FB652E'
		},
		title: {
			type: String,
			default: ''
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '4px'
		},
		price: {
			type: Number,
			default: '0'
		},
		bottom: {
			type: String,
			default: '32rpx'		
		}
	})
	const emit = defineEmits(['click'])
	const handleClick = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.i-rateLine {
		width: 100%;
		@include flexRS;
		align-items: flex-start;


		.title {
			@include dfont;
			white-space: nowrap;
			width: 28%;
		}
		.rig {
			width: 18%;
			@include flexR;
			justify-content: flex-end;
		}

		.lines {
			margin-top: 12rpx;
			width: 56%;
			height: 42rpx;
			@include flexRS;
			position: relative;
			align-items: flex-start;

			.line {
				border-radius: 6rpx;
				transition: all 0.3s ease-in;
			}

			.lines_text {
				position: absolute;
				@include dfont(22rpx);
				color: #A0A0AD;
				bottom: 0;

			}
		}
	}
</style>